<template>
  <div class="home">
    <sec-header></sec-header>
    <div class="home-container">
      <!-- 背景视频 -->
      <div class="home-video">
        <video playsinline loop autoplay muted>
          <!-- https://storage.googleapis.com/roamaroundbg/bg -->
          <source :src="require('@/assets/bg.mp4')" type="video/mp4" />
        </video>
      </div>
      <!-- 中间的内容区 -->
      <div class="home-wrappe" :style="`background-image: url(${bg})`">
        <div class="home-second">
          <div class="home-main-part">
            <!-- logo info -->
            <div class="logo-box">
              <div class="logo-title">Chat Travel</div>
              <h2>您的私人人工智能旅游指南</h2>
            </div>
            <!-- 搜索 -->
            <div class="home-input-wrapper">
              <el-input v-model="value" placeholder="Where to?" @keyup.enter.native="goHandle(value)"></el-input>
              <el-button type="primary" :disabled="!value" @click="goHandle(value)">go</el-button>
            </div>
            <!-- 日期 -->
            <div class="date-box">
              <el-date-picker
                prefix-icon="el-icon-edit"
                v-model="date"
                value-format="yyyy-MM-dd"
                :clearable="false"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 推荐的旅游 -->
    <footer>
      <h2>推荐的旅游：</h2>
      <vue-seamless-scroll :data="footer" :class-option="defaultOption">
        <ul class="ul-scoll">
          <li v-for="(item, index) in footer" :key="index" @click="goHandle(item.title)">
            {{ item.title }}
          </li>
        </ul>
      </vue-seamless-scroll>
    </footer>
  </div>
</template>

<script>
import moment from "moment";
import vueSeamlessScroll from "vue-seamless-scroll";
import secHeader from "./header";
// import { listTypeEnumApi } from "api";
export default {
  name: "home",
  props: {},
  components: { vueSeamlessScroll, secHeader },
  data() {
    return {
      value: "",
      date: [],
      bg: require("@/assets/bgroam.jpeg"),
      footer: [
        { title: "北京" },
        { title: "上海" },
        { title: "苏州" },
        { title: "香港" },
        { title: "巴厘岛" },
        { title: "故宫" },
        { title: "南京" },
        { title: "三亚" },
        { title: "韩国" },
        { title: "日本" },
        { title: "天津" },
      ],
      defaultOption: {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
    };
  },
  computed: {},
  created() {
    this.initDate(); //日期初始化
    // this.defaultOption.limitMoveNum = this.footer.length;
  },
  mounted() {
    // listTypeEnumApi().then((res) => {
    //   console.log("[ res ] >", res);
    // });
  },
  methods: {
    initDate() {
      let startTime = moment().format("YYYY-MM-DD");
      let endTime = moment().add(3, "days").format("YYYY-MM-DD");
      console.log(startTime);
      this.date = [startTime, endTime];
    },
    goHandle(value) {
      value && this.$router.push({ path: `/itinerary/${value}`, query: { from: this.date[0], to: this.date[1] } });
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类

.home-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.home-video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  video {
    width: 100%;
    height: inherit;
    object-fit: cover;
  }
}
.home-wrappe {
  background-size: cover;
  background-position: 50%;
  height: 100%;

  .home-second {
    background: rgba(131, 56, 253, 0.5);
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    justify-content: center;
  }
}
.home-main-part {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  .logo-box {
    text-align: center;
    color: #fff;
    .logo-title {
      font-family: monospace;
      font-size: 45px;
      font-weight: 600;
    }
    h2 {
      line-height: 16px;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 37px;
      margin-top: 5px;
    }
  }
}
.home-input-wrapper {
  position: relative;
  .el-input {
    align-items: center;
    background: #fff;
    border-radius: 31px;
    margin-bottom: 0;
    padding: 17px 64px 17px 23px;
    width: 295px;
    height: 62px;

    font-size: 15px;
    line-height: 20px;
    border: none;
    color: #fff;
    ::v-deep input {
      width: 100%;
      height: 100%;
      font-weight: 600;
      border: 0;
    }
  }
  button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
    top: 0;
    bottom: 0;
    cursor: pointer;
    border-radius: 100px;
    width: 52px;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    border: none;
    background: rgb(131, 56, 253);
  }
}
.date-box {
  text-align: center;
  margin-top: 20px;
  .el-date-editor {
    background: none;
    border: none;
    color: #fff;
    width: auto;
    ::v-deep i {
      color: #fff;
    }
    ::v-deep input {
      background: none;
      font-weight: 600;
      // text-align: left;
      width: 80px;
      color: #fff;
    }
    ::v-deep .el-range-separator {
      padding: 0;
      color: #fff;
      margin: 0 5px;
    }
  }
}
footer {
  position: fixed;
  bottom: 40px;
  left: 20px;
  right: 20px;
  width: 100%;
  color: rgb(242, 242, 242);
  height: 55px;
  overflow: hidden;
  h2 {
    text-align: center;
    font-size: 13px;
    margin-bottom: 5px;
  }
  ul {
    display: flex;
    li {
      margin: 0 50px;
      font-size: 25px;
      font-weight: 700;
      cursor: pointer;
      list-style: none;
      text-decoration: underline;
    }
  }
}

.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  background-color: $theme-color;
  border-color: $theme-color;
}
</style>
